import { BasicColumn, FormSchema } from '/@/components/Table';
import { Tag } from "ant-design-vue";
import { h } from "vue";
import { ProjectTypeList } from '/@/api/base/dictionary';
import { getAll as getAllClient } from '/@/api/business/client';
import { getList } from '/@/api/base/dictionary';
import { getCheckItemListByType } from '/@/api/project/planDetail';


// 表格定义
export const columns: BasicColumn[] = [
  {
    title: '编号',
    dataIndex: 'formNo',
  },
  {
    title: '委托单位',
    dataIndex: 'clientName',
  },
  {
    title: '委托业务',
    dataIndex: 'projectType',
  },

  {
    title: '摘要',
    dataIndex: 'summary',
    customRender: ({ record }) => {
      return record.work ? record.work.summary : '';
    },
  },
  {
    title: '发起人',
    dataIndex: 'operatorName',
    customRender: ({ record }) => {
      if (record.work) {
        const color = 'green';
        const text = record.work.operatorName;
        return h(Tag, { color: color }, () => text)
      }
      return '';
    },
  },
  {
    title: '发起时间',
    dataIndex: 'work.startTime',
    customRender: ({ record }) => {
      return record.work ? record.work.startTime : '';
    },
  },
  {
    title: '完成时间',
    dataIndex: 'work.stopTime',
    customRender: ({ record }) => {
      return record.work ? record.work.stopTime : '';
    },
  },
  {
    title: '流程状态',
    dataIndex: 'statusName',
    customRender: ({ record }) => {
      if (record.work) {
        const color = record.work.status == 20 ? 'red' : 'green';
        const text = record.work.statusName;
        return h(Tag, { color: color }, () => text);
      }
      return ''
    },
  }
];

/**
 * 搜索字段定义
*/
export const searchFormSchema: FormSchema[] = [
  {
    field: 'keyword',
    label: '关键字',
    component: 'Input',
    componentProps: {
      placeholder: '请输入名称/标识',
    },
    labelWidth: 60,
    colProps: { span: 6, lg: { span: 6, offset: 0 }, sm: { span: 10, offset: 0 }, xs: { span: 16, offset: 0 } },
  },
];

/**
 * 采样点位：搜索字段定义
*/
export const searchFormSchemaCheckSpot: FormSchema[] = [
  {
    field: 'item',
    label: '检测项目',
    component: 'Select',
    componentProps: {
      options: [
        { label: 'pH 值', value: 'pH 值' },
        { label: '氨氮', value: '氨氮' },
        { label: '动植物油类', value: '动植物油类' },
        { label: '化学需氧量', value: '化学需氧量' },
        { label: '石油类', value: '石油类' },
        { label: '五日生化需氧量（BOD5）', value: '五日生化需氧量（BOD5）' },
        { label: '悬浮物', value: '悬浮物' },
        { label: '总磷', value: '总磷' },
        { label: '苯', value: '苯' },
        { label: '苯乙烯', value: '苯乙烯' },
        { label: '臭气浓度', value: '臭气浓度' },
        { label: '氮氧化物', value: '氮氧化物' },
        { label: '颗粒物（烟尘、粉尘）', value: '颗粒物（烟尘、粉尘）' },
        { label: '对二甲苯', value: '对二甲苯' },
        { label: '二氧化硫', value: '二氧化硫' },
        { label: '非甲烷总烃', value: '非甲烷总烃' },
        { label: '甲苯', value: '甲苯' },
        { label: '间二甲苯', value: '间二甲苯' },
        { label: '邻二甲苯', value: '邻二甲苯' },
        { label: '乙酸丁酯', value: '乙酸丁酯' },
        { label: '乙酸乙酯', value: '乙酸乙酯' },
        { label: '油烟', value: '油烟' },
        { label: '总悬浮颗粒物（TSP）', value: '总悬浮颗粒物（TSP）' },
      ],
    },
    labelWidth: 60,
    colProps: { span: 6, lg: { span: 6, offset: 0 }, sm: { span: 10, offset: 0 }, xs: { span: 16, offset: 0 } },
  },
  {
    field: 'spot',
    label: '点位',
    component: 'Input',
    componentProps: {
      placeholder: '请输入点位名称',
    },
    labelWidth: 60,
    colProps: { span: 6, lg: { span: 6, offset: 0 }, sm: { span: 10, offset: 0 }, xs: { span: 16, offset: 0 } },
  },



];

/**
 * 采样信息：搜索字段定义
*/
export const searchFormSchemaCheckItem: FormSchema[] = [
  {
    field: 'checkType',
    label: '检测类别',
    component: 'ApiSelect',
    componentProps: {
      api: getList,
      labelField: 'value',
      valueField: 'value',
      params: '检测类别',
    },
    labelWidth: 60,
    colProps: { span: 6, lg: { span: 6, offset: 0 }, sm: { span: 10, offset: 0 }, xs: { span: 16, offset: 0 } },
  },
  {
    field: 'checkItem',
    label: '检测项',
    component: 'Input',
    componentProps: {
      placeholder: '请输入检测项名称，模糊匹配',
    },
    labelWidth: 60,
    colProps: { span: 6, lg: { span: 6, offset: 0 }, sm: { span: 10, offset: 0 }, xs: { span: 16, offset: 0 } },
  },



];

/**
 * 表单字段定义
*/
export const formSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'ID',
    component: 'Input',
    show: false,
  },
  {
    field: 'formNo',
    label: '表单编号',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'clientId',
    label: '委托单位',
    required: true,
    component: 'ApiSelect',
    componentProps: {
      api: getAllClient,
      showSearch: true,
      optionFilterProp: 'label',
      resultField: 'data',
      labelField: 'name',
      valueField: 'id',
    },
  },
  {
    field: 'projectType',
    label: '委托业务',
    required: true,
    component: 'ApiSelect',
    componentProps: {
      api: ProjectTypeList,
      showSearch: true,
      optionFilterProp: 'label',
      mode: "multiple",
      resultField: 'value',
      labelField: 'value',
      valueField: 'value',
      onChange: (e) => {
        console.log('selected:', e);
      },
    },
  },

  {
    field: 'checkSpot',
    label: '参考表',
    helpMessage: '采样点位信息，包含采样点位、频次、周期等信息',
    component: 'Input',
    slot: 'checkSpot',
  },
  {
    field: 'detailList',
    label: '采样信息',
    component: 'Input',
    slot: 'detailList',
  },
  {
    field: 'checkFee',
    label: '检测费用合计',
    helpMessage: '同一检测类别同一检测点位不同项目的采样费，只取最高值，不累加',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'otherFee',
    label: '其他费用',
    helpMessage: '组织验收、编制报告等费用',
    component: 'Input',
  },
  {
    field: 'totalFee',
    label: '合计',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },

  {
    field: 'remark',
    label: '备注',
    component: 'InputTextArea',
    colProps: { span: 24 },
  },

];




/**
 * 采样信息：表单字段定义
*/
export const tableFormSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'ID',
    component: 'Input',
    show: false,
  },
  {
    field: 'planId',
    label: '计划ID',
    component: 'Input',
    show: false,
  },
  {
    field: 'checkType',
    label: '检测类别',
    required: true,
    component: 'ApiSelect',
    componentProps: ({ formActionType }) => ({
      disabled: true,
      api: getList,
      labelField: 'value',
      valueField: 'value',
      params: '检测类别',
      onChange: (type) => {
        console.log('1.检测类别变更:', type);
        const { updateSchema, } = formActionType;
        getCheckItemListByType(type).then(res => {
          //1. 获取检测项目列表
          updateSchema({
            field: 'checkItem',
            componentProps: {
              options: [],
            },
          });
          updateSchema({
            field: 'checkItem',
            componentProps: {
              options: res.map(item => ({ label: item.checkItem, value: item.checkItem })),
            }
          });
          console.log('获取检测项目成功', res);
        });
      },

    }),
  },

  {
    field: 'checkItem',
    label: '项目',
    component: 'Select',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'checkSubtype',
    label: '类别',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'checkStandard',
    label: '检测方法',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'collectWay',
    label: '采集或保存方法',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
  },
  {
    field: 'checkSpot',
    label: '检测点位',
    component: 'Input',
    required: true,
  },
  {
    field: 'checkSpotCount',
    label: '点位(个)',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'checkFreq',
    label: '频次(次)',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'checkCycle',
    label: '周期(天)',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'checkTime',
    label: '采样时间',
    component: 'DatePicker',
  },
  {
    label: '检测项目总数',
    field: 'checkItemCount',
    component: 'InputNumber',
    componentProps: {
      disabled: true,
    },
  },
  {
    label: '分析费',
    field: 'checkPrice',
    component: 'InputNumber',
  },
  {
    label: '采样费单价',
    field: 'collectPrice',
    component: 'InputNumber',
  },
  {
    label: '测试费小计',
    field: 'checkFee',
    component: 'InputNumber',
    componentProps: {
      disabled: true,
    },
  },


];